<template>
    <div class="com-cnt">
        <div class="top">
            <button class="btn_1 active" style="border-right:1px solid #f0f0f0">统计列表</button>
            <button class="btn_3">TV展示</button>
        </div>
        <div class="box" :style="note">
            <div class="zs">
                <div class="font">
                    <p>累计注册人数</p>
                    <p>今日注册人数</p>
                    <p>累计会员人数</p>
                    <p>今日会员人数</p>
                    <p>累计体验会员人数</p>
                    <p>今日体验会员人数</p>
                </div>
                <div class="img_box">
                    <div class="shu"></div>
                    <img :src="divImg" alt="" class="tj_1">
                    <img :src="divImg" alt="" class="tj_2">
                    <img :src="divImg" alt="" class="tj_3">
                    <img :src="divImg" alt="" class="tj_4">
                    <img :src="divImg" alt="" class="tj_5">
                    <img :src="divImg" alt="" class="tj_6">
                </div>
                <div class="shuju">
                    <!-- <p v-for="item in showObj">
                        {{item}}
                        
                    </p> -->
                    <p>{{showObj.h_c}}
                        <span>人</span>
                    </p>
                    <p>{{showObj.t_c}}
                        <span>人</span>
                    </p>
                    <p>{{showObj.h_sv}}
                        <span>人</span>
                    </p>
                    <p>{{showObj.t_sv}}
                        <span>人</span>
                    </p>
                    <p>{{showObj.h_v}}
                        <span>人</span>
                    </p>
                    <p>{{showObj.t_v}}
                        <span>人</span>
                    </p>

                </div>
            </div>

        </div>
        <div class="Tv">
            <video style="width:100%;" id="myvideo" :poster="videoImg" :src="videoSrc" :muted="muteStatus" controls="controls" preload="preload" webkit-playsinline x5-playsinline playsinline></video>
            <div style="width:100%;height:100%;margin-bottom: 37px;">
                <img :src="div_Img" alt="" style="display:inline-block;width:100%;float:left;">
            </div>
        </div>
    </div>
</template>

<script>
import http from "@/assets/js/axios"
import { domain } from '@/assets/js/config'
import Qs from 'qs'
import axios from 'axios'
import $ from 'jquery'
import { maskCallback, maskTips } from '@/assets/js/dom'
export default {
    name: "oldPage",
    data() {
        return {
            divImg: require('@/assets/imgs/tj-1.png'),
            // bgImg:'../../assets/imgs/tjbj.png',
            note: {
                backgroundImage: "url(" + require("../../assets/imgs/tjbg.png") + ")"
            },
            showObj: {},
            _dom: "",
            videoSrc: 'https://out-4f5fadab5fc011e8b60a00163e1c955c.oss-cn-shanghai.aliyuncs.com/video/3b7f7361-164de96de7b-0005-8413-40d-8e3e0.mp4',
            videoImg: require('@/assets/imgs/xkh.png'),
            div_Img: require('@/assets/imgs/tvimg.png'),
            muteStatus: '',
            isMute: true,
            isPlay: false,
        }

    },
    mounted() {
        this.pageTurning();
        $('.box').show();
        $('.Tv').hide();
        $('.top button').click(function () {
            var self = $(this)
            self.addClass('active').siblings().removeClass('active');
            var _this = $(this).text();
            if (_this == '统计列表') {
                $('.box').show();
                $('.Tv').hide();
            } else {
                $('.box').hide();
                $('.Tv').show();
            }
        });
    },
    methods: {
        pageTurning: function () {
            let userToken = localStorage.getItem("token") || '';
            var that = this;
            axios({
                url: domain + '/xshk/f/user/count?token=' + userToken,
                method: 'post',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                data: Qs.stringify()
            }).then(res => { that.listsucc(res) }).catch(err => { that.listerr(err) })
        },
        listsucc(res) {
            console.log(res.data.data)
            this.showObj = res.data.data
        },
        listerr(err) {
            console.log(err)
        },
        // 视频方法
        playClick() {
            this._dom = document.getElementById('myvideo');
            this.isPlay = !this.isPlay;
            this._dom.play();
        },
        showOtherVideo() {
            let _this = this;
            setTimeout(function () {
                _this.flag = _this._dom.paused;
                if (!_this.flag) {
                    _this.showOtherVideo();
                    console.log(_this.flag);
                }

            }, 1000)
        }
    }
}
</script>

<style lang="stylus" scoped>
.com-cnt {
    width: 100%;
    height: auto;

    .box {
        width: 100%;
        height: 525px;
        padding: 0 0.66rem;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #fff;
        text-align: center;
        // background:url("../../assets/imgs/tjbj.png") no-repeat;
    }

    .box .zs {
        width: 100%;
        border: 1px solid #0f1e68;
        margin-bottom: 0.64rem;
        font-size: 0.24rem;
        color: #fff;
        float: left;
        margin-top: 1rem;
    }

    .box .zs .font {
        width: 2.6rem;
        text-align: right;
        line-height: 1rem;
        float: left;
        margin-right: 0.2rem;
    }

    .box .zs .img_box {
        width: 0.42rem;
        height: 5.4rem;
        float: left;
        position: relative;
        top: 12px;
    }

    .box .zs .img_box .shu {
        width: 1px;
        height: 100%;
        background: #fff;
        margin: 0 auto;
    }

    .box .zs .img_box .tj_1 {
        position: absolute;
        top: 0;
        left: 0;
    }

    .box .zs .img_box .tj_2 {
        position: absolute;
        top: 1rem;
        left: 0;
    }

    .box .zs .img_box .tj_3 {
        position: absolute;
        top: 2rem;
        left: 0;
    }

    .box .zs .img_box .tj_4 {
        position: absolute;
        top: 3rem;
        left: 0;
    }

    .box .zs .img_box .tj_5 {
        position: absolute;
        top: 4rem;
        left: 0;
    }

    .box .zs .img_box .tj_6 {
        position: absolute;
        top: 5rem;
        left: 0;
    }

    .box .zs .shuju {
        width: 2.2rem;
        text-align: left;
        line-height: 1rem;
        float: left;
        margin-left: 0.64rem;
        color: #fed24f;
        font-size: 0.3rem;
    }

    .box .zs .shuju p{
        height 50px
    }

    .box .zs .shuju span {
        color: #fff;
        font-size: 0.24rem;
    }
}

.top {
    width: 100%;
    height: 48px;
    line-height: 48px;
    text-align: center;
    display: flex;
    flex-direction: row;

    button {
        flex: 1;
        border: none;
        outline: none;
        font-size: 13px;
        color: #999;
        font-family: 'PingFangSC-Regular';
        background: #fff;
        border-bottom: 1px solid #f0f0f0;
    }

    .te {
        border-left: 1px solid #f0f0f0;
        border-right: 1px solid #f0f0f0;
    }

    .active {
        color: #8FC31F;
        border-bottom: 2px solid #8FC31F;
    }
}

.title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    box-sizing: border-box;
    padding: 0 10px;
    font-weight: bold;
    font-size: 20px;
    color: #333;
    text-align: center;
}

.border-bottom {
    &:before {
        bottom: 1px;
    }
}

.pic-cnt {
    width: 100%;
    height: auto;
    overflow: hidden;

    .item-pic {
        width: 100%;
        height: auto;
        display: block;
        float: left;
    }
}

.btn-fix {
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    background-color: #aad114;
    position: fixed;
    left: 0;
    bottom: 45px;
}
</style>